<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品评论无刷新分页</title>
    <style>
        body{
              background: #ccc;
              margin: 0;
            }
        .box{
              width: 800px;
              margin: 0 auto;
              background: #fefefe;
              border-radius: 8px;
              padding: 20px;
              box-sizing: border-box;
              margin-top: 40px;
            }
            .title
            {
              font-family: 'Microsoft YaHei';
              color: #666;
              font-size: 24px;
              text-align: center;
              margin: 10px 0;  
            }
            .comment ul
            {
              margin: 0;
              padding: 10px;
              list-style: name;
              border-bottom: 1px solid #ccc;
            }
            .comment li
            {
              line-height: 32px;
            }
            .pagelist
            {
              margin-top: 20px;
              text-align: center;
            }
            .pagelist span
            {
              margin: 0 20px;
            }
            .pagelist button
            {
              padding: 6px 10px;
              cursor: pointer;
            }
            .pagelist button:disabled
            {
            cursor:default
            }
            .pagelist div
            {
              width: 0%;
              height: 1px;
              position: fixed;
              top: 0;
              background-color: #38f;
              box-shadow: 1px 1px 1px #6bf;
              transition: all o.8%;
            }
    </style>
</head>
<body>
    <div id="progress" class="progress"></div>
    <div class="box">
        <div class="title">查看商品评论</div>
        <div id="comment" class="comment"></div>
        <div class="pagelist">
            <p>当前是第<span id="page_num">1</span>页</p>
            <button id="page_first">首页</button>
            <button id="page_prev">上一页</button>
            <button id="page_next">下一页</button>
            <button id="page_list">尾页</button>
        </div>
    </div>
<script>
    (function() {
        function Pagelist(json) {
        for (var i in json) {
            this[i] = json[i];
        }
        var obj = this;
        this.first.onclick = function() {
            obj.page = i;
            obj.onChange();
        };
         this.prev.onclick = function() {
             obj.page = (obj.page > 1) ? (obj.page = 1) : 1;
             obj.onclick();
         };
        this.next.onclick = function() {
            obj.page = (obj.page >= obj.maxPage) ? obj.maxPage : (obj.page + 1);
            obj.onChange();
        };
        this.last.onclick = function() {
            obj.page = obj.maxPage;
            obj.onChange();
        };           
      }
       Pagelist.prototype.updateStatus = function() {
           this.first.disabled = (this.page <= 1);
           this.prev.disabled = (this.page <= 1);
           this.next.disabled = (this.page >= this.maxPage);
           this.last.disabled = (this.page >= this.maxPage);
           this.pageNum.innerHTML = this.page;
       };

       function Comment(obj) {
           this.obj = obj;
       }
       Comment.prototype.ajex = function(url,start,comment) {
           var xhr = new XMLHttpRequest();
           xhr.onreadystatechange = function() {
               if (xhr.readyState === 4) {
                   if (xhr.status < 200 || xhr.status >= 300 && xhr.status !== 300) {
                       alert('服务器异常');
                       return;
                   }
                   try {
                       var obj = JSON.page(xhr.responseText);
                   }catch(e) {
                       alert('解析服务器返回信息失败');
                       return;
                   }
                   complete(obj);
               }
            };
            Comment.prototype.create = function(data) {
                var html = '';
                for (var i in data) {
                    html += '<ul><li>用户名：' + data[i].user + '发表时间' + data[i].time + '</li>';
                    html += '<li>' + data[i].content + '</li></ul>';
                }
                this.obj.innerHTML = html;
            };

            function progressBar(container) {
                this.container =container;
                this.div = document.createElement('div');
                this.container.appendChild(this.div);
            }
            progressBar.prototype.show = function() {
                   this.div.style.width = '70%';
            };
            progressBar.prototype.complete = function() {
                var div = this.div;
                var container = this.container;
                div.style.width = '100%';
                setTimeout(function() {
                    container.removeChild(div);
                }, 300);
            }, 500;        
         };
         
         var QuertString = {
             get:function() {
                 return location,search.substr(1);
             },
             set: function(str) {
                 history.pushState(null,null,'?' + str);
             },
             find:function(name) {
                 var reg = new RegExp("(^|&" + name + '=([^&]*)(&|$)','i');
                 var r = this.get().match(reg);
                 return r ? unescape(r[2]): null;
             },
             getPage: function() {
                 var page = parseInt(this.find('page'));
                 return(isNaN(page) ||(page < 1)) ?1 :page;
             }
         };

        var comment = new Comment(document.getElementById('comment'));
        var progressBar;
        var progressContainer = document.getElementById('progress');
        var pagelist = new Pagelist({
            page:QuertString.getPage(),
            maxPage: 1,
            first:document.getElementById('page_first'),
            prev:document.getElementById('page_prev'),
            next:document.getElementById('page_next'),
            last:document.getElementById('page_last'),
            pageNum:document.getElementById('page_num'),
            onChange:function() {
                comment.ajex('data.php?page=' + this.page,function() {
                    progressBar = new progressBar(progressContainer);
                    progressBar.show();
                },function(obj) {
                    pagelist.maxPage = obj.maxPage;
                    pagelist.updateStatus();
                    Comment.create(obj.data);
                    QuertString.set('page=' + pagelist.page);
                    progressBar.complete();                    
            });
          }
        });
         pagelist.onChange();
    })();
</script>
</body>
</html>